import { Collapse } from 'antd';
import type { CollapseProps } from 'antd/es/collapse';
import clsx from 'clsx';
import styles from './index.module.scss';

interface ICollapse extends CollapseProps {
  items: {
    label: string;
    children: React.ReactNode;
  }[];
}

export default ({
  items,
  className,
  ...props
}: ICollapse) => {
  return (
    <Collapse
      ghost={true}
      expandIconPosition="end"
      className={clsx(styles.collapse, className)}
      {...props}
    >
      {items.map(({ label, children }, idx) => (
        <Collapse.Panel
          header={label}
          key={idx}
        >
          {children}
        </Collapse.Panel>
      ))}
    </Collapse>
  );
};
